<script setup lang="ts">
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import useSkuStore from "@/pinia/modules/product/skuStore/skuStore.ts";
import { skuItem } from "@/api/product/skuApi/interface.ts";
import { ElMessage } from "element-plus";

const skuStore = useSkuStore();

const { pageParams, skuList, total, drawer, skuDetail } = storeToRefs(skuStore);

const handleSizeChange = () => {
  skuStore.fetchSkuListInfo();

};
const handleCurrentChange = () => {
  skuStore.fetchSkuListInfo();

};

const handleDeleteSku = async (sku: skuItem) => {
  try {
    const result: string = await skuStore.deleteSku(sku.id);
    await skuStore.fetchSkuListInfo();
    ElMessage.success(result);
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};


const saleOrCancel = async (sku: skuItem) => {
  try {
    const result: string = await skuStore.saleSkuOrCancelSku(sku);
    await skuStore.fetchSkuListInfo();
    ElMessage.success(result);
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};

const handleSkuInfo = async (sku: skuItem) => {
  await skuStore.findSkuDetail(sku.id);
  drawer.value = true;
};

onMounted(() => {
  skuStore.fetchSkuListInfo();
});
</script>

<template>
  <div class="sku">
    <el-card>
      <el-table border stripe :data="skuList">
        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
        <el-table-column label="名称" prop="skuName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="描述" prop="skuDesc" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="图片" align="center">
          <template #default="{row}">
            <img :src="row.skuDefaultImg" alt="">
          </template>
        </el-table-column>
        <el-table-column label="重量" prop="weight" align="center"></el-table-column>
        <el-table-column label="价格" prop="price" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="300px" fixed="right">
          <template #default="{row}">
            <el-button :type="row.isSale===0?'danger':'primary'" :icon="row.isSale===0?'Bottom':'Top'" @click="saleOrCancel(row)"></el-button>
            <el-button type="warning" icon="Edit"></el-button>
            <el-button type="info" icon="InfoFilled" @click="handleSkuInfo(row)"></el-button>
            <el-button type="danger" icon="Delete" @click="handleDeleteSku(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
        :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
        backgroun :total="Number(total||0)"
        @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>

    <el-drawer v-model="drawer" title="SKU详情">
      <el-row>
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ skuDetail.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ skuDetail.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ skuDetail.price }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag v-for="item in skuDetail.skuAttrValueList" :key="item.id">{{ item.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag v-for="item in skuDetail.skuSaleAttrValueList" :key="item.id">{{ item.saleAttrValueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel height="500px">
            <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item.id">
              <img :src="item.imgUrl" alt="" style="width: 100%;height: 100%;">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
.el-table {
  margin: 10px 0;

  img {
    width: 80px;
  }
}

.el-pagination {
  display: flex;
  justify-content: center;
}

.el-row {
  margin: 20px 0;
}

.el-tag {
  margin: 5px 5px;
}

</style>
